<template>
  <div class="test-page">
    <Header title="儿童生长发育自测"></Header>
    <div class="test-main">
      <div class="test-basic" v-if="flag">
        <h3>基本信息</h3>
        <el-form :model="basic" ref="basic" label-width="100px" class="demo-ruleForm">
          <el-form-item
            label="宝宝姓名"
            prop="bodyname"
            :rules="[
      { required: true, message: '姓名不能为空'},
      { type: 'string', message: '姓名格式错误'}
    ]"
          >
            <el-input
              type="lable"
              v-model.number="basic.bodyname"
              autocomplete="off"
              placeholder="输入宝宝姓名"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="性别"
            prop="sex"
            :rules="[
      { required: true, message: '性别不能为空'},
    ]"
          >
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </el-form-item>

          <el-form-item
            label="生日"
            prop="time"
            :rules="[
      { required: true, message: '日期不能为空'}

    ]"
          >
            <el-date-picker v-model="times" type="date" placeholder="选择出生日期"></el-date-picker>
          </el-form-item>

          <el-form-item
            label="宝爸身高"
            prop="height"
            :rules="[
      { required: true, message: '身高不能为空'},
       { type:'number', message: '身高只能是数字'}
    ]"
          >
            <el-input
              type="lable"
              v-model.number="basic.manheight"
              autocomplete="off"
              placeholder="输入宝爸身高"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="宝妈身高"
            prop="height"
            :rules="[
      { required: true, message: '身高不能为空'},
       { type:'number', message: '身高只能是数字'}
    ]"
          >
            <el-input
              type="lable"
              v-model.number="basic.menheight"
              autocomplete="off"
              placeholder="输入宝妈身高"
            ></el-input>
          </el-form-item>
        </el-form>
        <p class="tishii">输入父母身高可计算孩子的遗传身高</p>
      </div>
      <div class="test-current">
        <h3>当前测量</h3>
        <el-form :model="basic" ref="current" label-width="100px" class="demo-ruleForm">
          <el-form-item
            label="宝宝当前身高"
            prop="height"
            :rules="[
      { required: true, message: '身高不能为空'},
       { type:'number', message: '身高只能是数字'}
    ]"
          >
            <el-input
              type="lable"
              v-model.number="current.bodyheight"
              autocomplete="off"
              placeholder="请输入身高(cm)"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="宝宝当前体重"
            prop="height"
            :rules="[
      { required: true, message: '体重不能为空'},
       { type:'number', message: '体重只能是数字'}
    ]"
          >
            <el-input
              type="lable"
              v-model.number="current.bodyweight"
              autocomplete="off"
              placeholder="请输入体重(kg)"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="宝宝测量日期"
            prop="time"
            :rules="[
      { required: true, message: '日期不能为空'}

    ]"
          >
            <el-date-picker v-model="testtime" type="date"></el-date-picker>
          </el-form-item>

          <el-form-item
            label="生日测量提醒"
            prop="remind"
            :rules="[
      { required: true, message: '日期不能为空'}

    ]"
          >
            <el-switch v-model="remind"  active-color="#ff4949" inactive-color="#f90"></el-switch>
          </el-form-item>
        </el-form>
        <p class="tishii">定期测量身高体重，了解儿童生长发育曲线</p>
      </div>
    </div>
    <button>提交评估</button>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  name: "test",
  components: {
    Header
  },
  data() {
    return {
      flag: true,//基本信息展示开关
      radio: "", //性别
      times: "",//生日
      testtime: "",//宝宝测量日期
      remind: "",//测量提醒
      basic: {
        manheight: "",
        menheight: "",
        bodyname: ""
      },
      current: {
        bodyheight: "",
        bodyweight: ""
      }
    };
  },
  created() {
    this.testtime = new Date();
  }
};
</script>

<style>
</style>